<template>
  <div class="comment-manage">
    <div class="operation-bar">
      <a-radio-group v-model="status" @change="handleStatusChange">
        <a-radio-button value="">全部</a-radio-button>
        <a-radio-button value="pending">待审核</a-radio-button>
        <a-radio-button value="approved">已通过</a-radio-button>
        <a-radio-button value="rejected">已拒绝</a-radio-button>
      </a-radio-group>
    </div>

    <a-table
      :columns="columns"
      :data-source="commentList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #content="{ text }">
        <div class="comment-content">{{ text }}</div>
      </template>
      <template #action="{ record }">
        <a-space>
          <template v-if="record.status === 'pending'">
            <a @click="handleApprove(record.id)">通过</a>
            <a @click="handleReject(record.id)">拒绝</a>
          </template>
          <a-popconfirm
            title="确定要删除这条评论吗？"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <!-- 查看详情弹窗 -->
    <a-modal
      title="评论详情"
      :visible="detailVisible"
      @ok="handleDetailOk"
      @cancel="handleDetailCancel"
    >
      <a-descriptions :column="1">
        <a-descriptions-item label="小说名称">
          {{ currentComment.novelTitle }}
        </a-descriptions-item>
        <a-descriptions-item label="评论用户">
          {{ currentComment.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="评论内容">
          {{ currentComment.content }}
        </a-descriptions-item>
        <a-descriptions-item label="评论时间">
          {{ currentComment.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          {{ getStatusText(currentComment.status) }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'CommentManage',
  data() {
    return {
      loading: false,
      status: '',
      detailVisible: false,
      currentComment: {},
      columns: [
        {
          title: '小说名称',
          dataIndex: 'novelTitle'
        },
        {
          title: '评论用户',
          dataIndex: 'userName'
        },
        {
          title: '评论内容',
          dataIndex: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '评论时间',
          dataIndex: 'createTime'
        },
        {
          title: '状态',
          dataIndex: 'status',
          customRender: (text) => this.getStatusText(text)
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      commentList: []
    }
  },
  created() {
    this.fetchCommentList()
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return statusMap[status] || status
    },
    async fetchCommentList() {
      this.loading = true
      try {
        // TODO: 调用API获取评论列表
        // const res = await this.$api.novel.getCommentList({
        //   page: this.pagination.current,
        //   pageSize: this.pagination.pageSize,
        //   status: this.status
        // })
        // this.commentList = res.data.list
        // this.pagination.total = res.data.total
      } catch (error) {
        this.$message.error('获取评论列表失败')
      }
      this.loading = false
    },
    handleStatusChange() {
      this.pagination.current = 1
      this.fetchCommentList()
    },
    async handleApprove(id) {
      try {
        // TODO: 调用API审核通过
        this.$message.success('审核通过成功')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    async handleReject(id) {
      try {
        // TODO: 调用API审核拒绝
        this.$message.success('审核拒绝成功')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    async handleDelete(id) {
      try {
        // TODO: 调用API删除评论
        this.$message.success('删除成功')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.fetchCommentList()
    },
    showDetail(record) {
      this.currentComment = { ...record }
      this.detailVisible = true
    },
    handleDetailOk() {
      this.detailVisible = false
    },
    handleDetailCancel() {
      this.detailVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-manage {
  padding: 24px;
  
  .operation-bar {
    margin-bottom: 16px;
  }

  .comment-content {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style> 